---
description: Компонент-обёртка для создания всплывающих элементов.
---

<Overview group="utils">

# PopoutWrapper [tag:component]

Компонент-обёртка для создания всплывающих элементов. Отвечает за стратегию позиционирования элементов и подложку.
Является базовым компонентом в `Alert`, `ActionSheet` и `ScreenSpinner`.

</Overview>

<Playground>

```jsx
const [isOpen, setIsOpen] = React.useState(false);

// Для улучшения UX, при открытии всплывающего окна, стоит блокировать прокрутку страницы.
// Иначе у пользователя может быть две прокрутки: одна на всплывающем окне, вторая за ним.
useScrollLock(isOpen);

return (
  <>
    <Button onClick={() => setIsOpen(true)}>Открыть окно</Button>
    {isOpen && (
      <PopoutWrapper onClick={() => setIsOpen(false)}>
        <Div>
          <Title>Всплывающее окно</Title>
          <Text>Содержимое всплывающего окна</Text>
        </Div>
      </PopoutWrapper>
    )}
  </>
);
```

</Playground>

## Позиционирование

### Стратегия позиционирования

Свойство `strategy` определяет, как будет позиционироваться всплывающий элемент:

- `"fixed"` — контейнеру задаётся стиль `position: fixed` (по умолчанию);
- `"absolute"` — контейнеру задаётся стиль `position: absolute`;
- `"none"` — у контейнера не выставляется `position`.

### Горизонтальное выравнивание

Свойство `alignX` определяет выравнивание контента по горизонтали:

- `"center"` — контент выравнивается по центру (по умолчанию);
- `"left"` — контент выравнивается по левому краю;
- `"right"` — контент выравнивается по правому краю.

### Вертикальное выравнивание

Свойство `alignY` определяет выравнивание контента по вертикали:

- `"center"` — контент выравнивается по центру (по умолчанию);
- `"top"` — контент выравнивается по верхнему краю;
- `"bottom"` — контент выравнивается по нижнему краю.

### z-index

Свойство `zIndex` позволяет управлять порядком наложения элементов. Можно задать числовое или строковое значение (токен):

```jsx
// Установка z-index через токен
<PopoutWrapper zIndex="var(--vkui--z_index_popout)">
  <div>Контент</div>
</PopoutWrapper>

// Установка z-index числом
<PopoutWrapper zIndex={100}>
  <div>Контент</div>
</PopoutWrapper>
```

## Внешний вид

### Подложка

По умолчанию компонент создаёт полупрозрачную подложку. Её можно отключить с помощью свойства `noBackground`:

```jsx
// Подложка отключена
<PopoutWrapper noBackground>
  <div>Контент</div>
</PopoutWrapper>
```

Также компонент поддерживает анимацию плавного исчезновения подложки через свойство `closing`:

```jsx
// Подложка будет исчезать с анимацией
<PopoutWrapper closing>
  <div>Контент</div>
</PopoutWrapper>
```

## Полоса прокрутки

Чаще всего подобные всплывающие окна требуют блокировки полосы прокрутки всей страницы.
Для этого используйте хук [`useScrollLock`](/components/use-scroll-lock):

```jsx
const [isOpen, setIsOpen] = React.useState(false);

// Для улучшения UX, при открытии всплывающего окна, стоит блокировать прокрутку страницы.
// Иначе у пользователя может быть две прокрутки: одна на всплывающем окне, вторая за ним.
useScrollLock(isOpen);

return (
  <>
    <Button onClick={() => setIsOpen(true)}>Открыть окно</Button>
    {isOpen && (
      <PopoutWrapper onClick={() => setIsOpen(false)}>
        <div>
          <h2>Всплывающее окно</h2>
          <p>Содержимое всплывающего окна</p>
        </div>
      </PopoutWrapper>
    )}
  </>
);
```

## Обработчики событий

Компонент позволяет обрабатывать нажатия по подложке через свойство `onClick`:

```jsx
const handleClick = () => {
  // Закрыть всплывающий элемент
};

<PopoutWrapper onClick={handleClick}>
  <div>Контент</div>
</PopoutWrapper>;
```

## Свойства и методы [#api]

<PropsTable name="PopoutWrapper" />
